<template>
  <ElementDialog title="整改措施" :close-on-click-modal="false" width="95%" top="5%" :visible.sync="visible">
    <FyCurd
      ref="crud"
      v-model="form"
      :page.sync="page"
      :data="tableData"
      :table-loading="tableLoading"
      :option="tableOption"
      @selection-change="selectionChange"
      @on-load="getList"
      @search-change="searchChange"
      @refresh-change="refreshChange"
      @size-change="sizeChange"
      @current-change="currentChange"
      @row-update="handleUpdate"
      @row-save="handleSave"
      @row-del="handleDel" />
    <template #footer>
      <span class="dialog-footer">
        <ElButton @click="visible = false">取消</ElButton>
        <ElButton type="primary" @click="checkRowData">确定</ElButton>
      </span>
    </template>
  </ElementDialog>
</template>

<script>
  import { fetchList, putObj, delObj, addObj } from '@/api/problem/rectify'
  import { mapState } from 'vuex'

  export default {
    name: 'Rectify',
    props: {
      // 允许选择的条数
      allowChooseNum: {
        type: Number,
        default: 1
      }
    },
    data() {
      return {
        searchForm: {},
        tableData: [],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 20 // 每页显示多少条
        },
        tableLoading: false,
        tableOption,
        form: {},
        resultData: [],
        visible: false
      }
    },
    // props
    computed: {
      ...mapState('user', ['permissions'])
    },
    methods: {
      init() {
        this.visible = true
      },
      // 列表查询
      getList(page, params) {
        if (this.problemInforId > 0) {
          this.searchForm.problemInforId = this.problemInforId
        }
        this.tableLoading = true
        fetchList(
          Object.assign(
            {
              current: page.currentPage,
              size: page.pageSize
            },
            params,
            this.searchForm
          )
        )
          .then(response => {
            this.tableData = response.data.data.records
            this.page.total = response.data.data.total
            this.tableLoading = false
          })
          .catch(() => {
            this.tableLoading = false
          })
      },
      // 删除
      handleDel: function (row, index) {
        this.$confirm(`是否确认删除ID为${row.id}`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            return delObj(row.id)
          })
          .then(data => {
            this.$message.success('删除成功')
            this.getList(this.page)
          })
      },
      // 更新
      handleUpdate: function (row, index, done, loading) {
        putObj(row)
          .then(data => {
            this.$message.success('修改成功')
            done()
            this.getList(this.page)
          })
          .catch(() => {
            loading()
          })
      },
      // 保存
      handleSave: function (row, done, loading) {
        addObj(row)
          .then(data => {
            this.$message.success('添加成功')
            done()
            this.getList(this.page)
          })
          .catch(() => {
            loading()
          })
      },
      // 每页条数改变事件
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
      },
      // 当前页发生改变事件
      currentChange(current) {
        this.page.currentPage = current
      },
      // 查询事件
      searchChange(form, done) {
        this.searchForm = form
        this.page.currentPage = 1
        this.getList(this.page, form)
        done()
      },
      // 刷新事件
      refreshChange() {
        this.getList(this.page)
      },
      selectionChange(list) {
        if (this.allowChooseNum > 0) {
          if (list.length > this.allowChooseNum) {
            this.toggleSelection()
            this.$message.success(`只能选择${this.allowChooseNum}条`)
            return
          }
        }
        this.resultData = list
      },
      // 返回选择的行数据
      checkRowData() {
        this.$emit('getProblemRectifyData', this.resultData)
        this.visible = false
      },
      toggleSelection(val) {
        this.$refs.crud.toggleSelection(val)
      }
    }
  }

  const tableOption = {
    border: true,
    index: true,
    indexLabel: '序号',
    stripe: true,
    menuAlign: 'center',
    align: 'center',
    dialogWidth: '90%',
    labelWidth: 120,
    dialogTop: '5%',
    searchMenuSpan: 6,
    selection: true,
    addBtn: false,
    menuBtn: false,
    menu: false,
    column: [
      {
        type: 'input',
        label: '问题主单',
        prop: 'problemInforNum',
        span: 8,
        width: 200,
        formslot: true,
        required: true,
        rules: [{ required: true, message: '选择问题主单' }]
      },
      {
        type: 'input',
        label: '整改单号',
        prop: 'number',
        span: 8,
        width: 200,
        display: false
      },
      {
        type: 'input',
        label: '职能部门名称',
        prop: 'functionalName',
        width: 120,
        span: 8,
        formslot: true,
        required: true,
        rules: [{ required: true, message: '选择职能部门' }]
      },
      {
        type: 'select',
        label: '完成时限',
        prop: 'timelimitType',
        span: 8,
        dicData: [
          { label: '长期坚持', value: '0' },
          { label: '周期完成', value: '1' }
        ],
        cascaderItem: [],
        display: true,
        value: '0',
        props: { label: 'label', value: 'value' },
        formslot: true,
        required: true,
        rules: [{ required: true, message: '选择完成时限' }]
      },
      {
        type: 'date',
        label: '开始时间',
        prop: 'startdate',
        display: false,
        span: 12,
        width: 120,
        format: 'yyyy-MM-dd',
        valueFormat: 'yyyy-MM-dd',
        formslot: true
      },
      {
        type: 'date',
        label: '结束时间',
        prop: 'enddate',
        span: 12,
        display: false,
        width: 120,
        format: 'yyyy-MM-dd',
        valueFormat: 'yyyy-MM-dd',
        formslot: true
      },
      {
        type: 'input',
        label: '紧急程度',
        prop: 'emergency',
        width: 200,
        span: 8
      },
      {
        type: 'date',
        label: '完成时间',
        prop: 'completionDate',
        span: 8,
        display: true,
        width: 120,
        format: 'yyyy-MM-dd',
        valueFormat: 'yyyy-MM-dd'
      },
      {
        type: 'number',
        label: '完成进度(%)',
        prop: 'completionBfb',
        precision: 2,
        width: 100,
        span: 8
      },
      {
        type: 'textarea',
        label: '整改措施',
        prop: 'describeText',
        width: 200,
        span: 24,
        display: true
      },
      {
        type: 'textarea',
        label: '完成情况',
        prop: 'completion',
        width: 200,
        span: 24,
        display: true
      },
      {
        type: 'textarea',
        label: '备注',
        prop: 'remarks',
        width: 300,
        span: 24,
        display: true
      }
    ]
  }
</script>
